1import { Navigation, NavigationSplitView, NavigationSplitViewColumn, Script, Text, useState, VStack } from "scripting"
2
3function Example() {
4 const [preferredColumn, setPreferredColumn] = useState<NavigationSplitViewColumn>("detail")
5
6 return <NavigationSplitView
7 preferredCompactColumn={{
8 value: preferredColumn,
9 onChanged: (value) => {
10 console.log("preferredCompactColumn changed to", value)
11 setPreferredColumn(value)
12 }
13 }}
14 sidebar={
15 <VStack
16 navigationContainerBackground={"yellow"}
17 frame={{
18 maxWidth: "infinity",
19 maxHeight: "infinity",
20 }}
21 >
22 <Text>Yellow</Text>
23 </VStack>
24 }
25 >
26 <VStack
27 navigationContainerBackground={"blue"}
28 frame={{
29 maxWidth: "infinity",
30 maxHeight: "infinity",
31 }}
32 >
33 <Text>Blue</Text>
34 </VStack>
35 </NavigationSplitView>
36}
37
38async function run() {
39 await Navigation.present({
40 element: <Example />
41 })
42
43 Script.exit()
44}
45
46run()
